<template>
  <div class="padding flex direction-column height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="文档名称">
          <el-input v-model="keyword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="clickSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="button-group">
      <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
    </div>
    <div class="flex-1 overflow-auto dark-table-wrapper">
      <el-table
        v-loading="loading"  :data="lists" height="100%"
        :header-cell-style="{
          color: 'white',
          backgroundColor: themeColor,
        }"
      >
        <div slot="empty" class="empty-lists">
          <i class="i-custom:search"></i>
          <span class="empty-text">暂无数据</span>
        </div>
        <el-table-column v-for="column in columns" :key="column.prop" v-bind="column">
        </el-table-column>
        <el-table-column label="操作" prop="operate" align="center" width="160">
          <template #default="{ row }">
            <td-button title="下载" @click="download(row.url, row.name)">
              <i class="i-custom:falling"></i>
            </td-button>
            <td-button title="编辑" @click="edit(row)">
              <i class="i-custom:editor"></i>
            </td-button>
            <td-button title="删除" class="del-btn" icon-style="color: var(--danger-color);border-color: var(--danger-color);" @click="del(row)">
              <i class="i-custom:ashbin"></i>
            </td-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      class="pagination" layout="total, prev, pager, next"
      :current-page.sync="pagination.pageNumber" :page-size="pagination.pageSize" :total="pagination.total"
      hide-on-single-page background
      @current-change="query"
    ></el-pagination>
    <operate-modal ref="modal" :modal-title="modalTitle" :modal-data="modalData" @save-success="reload"></operate-modal>
  </div>
</template>

<script>
import { selectPageList, del } from '@/api/fileManagement'
import TdButton from '@/components/td-button'
import OperateModal from '@/views/file-management/operate-modal'
import { confirmDel } from '@/utils'

const api = {
  selectPageList,
  del
}
export default {
  name: 'file-management',
  components: { TdButton, OperateModal },
  data () {
    return {
      keyword: '',
      loading: false,
      lists: [],
      columns: [
        { label: '文档名称', prop: 'name' },
        { label: '文档类型', prop: 'typeName', width: 260 },
        { label: '创建时间', prop: 'createTime', width: 260 },
      ],
      pagination: {
        pageNumber: 1,
        pageSize: 20,
        total: 0,
      },
      modalTitle: '',
      modalData: {},
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
  },
  mounted () {
    this.reload()
  },
  methods: {
    reload () {
      this.pagination.pageNumber = 1
      this.$nextTick(() => {
        this.query()
      })
    },
    clickSearch () {
      this.reload()
    },
    query () {
      this.loading = true
      const params = {
        pageNumber: this.pagination.pageNumber,
        pageSize: this.pagination.pageSize,
        name: this.keyword,
      }
      return api.selectPageList(params).then(res => {
        if (res.code === 200) {
          res.data.records.forEach(v => {
            v.createTime = v.creationTime || v.updateTime
          })
          this.lists = res.data.records
          this.pagination.total = res.data.total
        }
      }).finally(() => {
        this.loading = false
      })
    },
    add () {
      this.modalTitle = '新增文件'
      this.modalData = {}
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
    edit (row) {
      this.modalTitle = '编辑文件'
      this.modalData = { ...row }
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
    del (row) {
      confirmDel(this).then(() => {
        return api.del(row.id).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.reload()
          }
        })
      }).catch(() => {})
    },
    download (url, fileName) {
      const a = document.createElement('a')
      a.href = url
      a.setAttribute('download', fileName)
      a.setAttribute('target', '_blank')
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.parentNode.removeChild(a)
    },
    viewFile (row) {
      if (row.previewUrl) {
        window.open(row.previewUrl)
      }
    }
  },
}
</script>
